<template>
  <div class="aid">
    <div class="base">
      <p>问题详情
        <a-icon @click="closeFunction(false)" class="closeCircle" type="close-circle" />
      </p>
      <div class="scrollView">
        <a-form-model ref="ruleForm">
          <a-form-model-item label="接听时间">
            <a-input v-model="info.AnswerTime"/>
          </a-form-model-item>
          <a-form-model-item label="接听人">
            <a-input v-model="info.AnswerUserName"/>
          </a-form-model-item>
          <a-form-model-item label="来电号码">
            <a-input v-model="info.Phone"/>
          </a-form-model-item>
          <a-form-model-item label="来电人姓名" prop="Name">
            <a-input v-model="info.Name" style="width: 60%;margin-right: 25px;"/>
            <a-radio-group v-model="info.Sex">
              <a-radio :value="1">
                男
              </a-radio>
              <a-radio :value="2">
                女
              </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="问题描述" :show-overflow-tooltip="true">
            <a-input v-model="info.Content" type="textarea" :auto-size="{ minRows: 4, maxRows: 6 }"/>
          </a-form-model-item>
          <a-form-model-item label="问题类型">
            <a-input v-model="info.QuestionName"/>
          </a-form-model-item>
          <a-form-model-item label="部门">
            <a-input v-model="info.DepartName"/>
          </a-form-model-item>
          <a-form-model-item label="负责人">
            <a-input v-model="info.ChargeUserName"/>
          </a-form-model-item>
          <a-form-model-item :label="item.FieldName" v-for="(item,index) in questions" class="icon-f">
            <a-input v-if="item.Type==1" placeholder="数字" v-model="item.Num" :allowClear="true"/>
            <a-date-picker v-if="item.Type==2" placeholder="日期" v-model="item.Dates" style="width: 100%;"/>
            <a-time-picker v-if="item.Type==3" :default-value="moment(item.Time?item.Time:'00:00:00', 'HH:mm:ss')" style="width: 100%;"/>
            <!-- <a-time-picker v-if="item.Type==3" placeholder="时间" format="HH:mm:ss" :value="item.Time" style="width: 100%;"/> -->
            <a-date-picker v-if="item.Type==4" placeholder="日期加时间" v-model="item.Content" show-time format="YYYY-MM-DD HH:mm:ss"
                           style="width: 100%;"
            />
            <a-input v-if="item.Type==5" placeholder="单行文本" v-model="item.Text" :allowClear="true"/>
            <a-input v-if="item.Type==6" placeholder="多行文本" v-model="item.Textarea" :allowClear="true" type="textarea" :auto-size="{ minRows: 4, maxRows: 6 }"/>
            <a-select v-if="item.Type==7" placeholder="省份" v-model="item.Province" :allowClear="true" @change="provinceChange">
              <a-select-option v-for="(item, index) in provinceList" :key="item.ID" :value="item.ID">{{ item.ProvinceName }}</a-select-option>
            </a-select>
            <a-select v-if="item.Type==8" placeholder="市区" v-model="item.City" :allowClear="true">
              <a-select-option v-for="(item, index) in cityList" :key="item.ID">{{ item.CityName }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
        <!-- <a-form-model-item :label="item.FieldName" v-for="(item,index) in questions" class="icon-f">
          <a-input type="textarea" v-model="item.Content"/>
        </a-form-model-item> -->
        </a-form-model>
      </div>
    </div>
  </div>
</template>

<script>
	import {
		getVisitDetail,
		getProvinceList,
		getCityByProvinceIDList
	} from '@/api/follow'
	import moment from 'moment'
	export default {
		props: {
			messageID: String,
			nowTime: String
		},
		watch: {
			messageID: function(text) {

			},
			nowTime: function(text) {
				console.log(text)
				this._getVisitDetail(this.messageID)
			}
		},
		data() {
			return {
				info: [],
				questions: [],
				provinceList: [],
				cityList: []
			}
		},
		created() {
			this._getProvinceList()
		},
		methods: {
			moment,
			closeFunction(flag) {
				this.$emit('closeFun', flag)
			},
			async _getVisitDetail(messageID) {
				this.questions = []
				let detail = await getVisitDetail({ID: messageID})
				this.info = detail.data.data
				let field = detail.data.field
				let fieldData = detail.data.fieldData
				if (fieldData.length > 0) {
					field.forEach((item, index) => {
						fieldData.forEach((val, i) => {
							if (item.ID == val.FieldID) {
								if (item.Type == 7) {
									this.provinceChange(val.Content)
								}
								let show = item.Type == 1 ? 'Num' : item.Type == 2 ? 'Dates' : item.Type == 3 ? 'Time' : item.Type == 4 ? 'Content' : item.Type == 5 ? 'Text' : item.Type == 6 ? 'Textarea' : item.Type == 7 ? 'Province' : 'City'
								this.questions.push({ID: item.ID, FieldName: item.FieldName, IsMust: item.IsMust, Errormsg: item.Errormsg, Type: item.Type, Regex: item.Regex, [show]: (item.Type == 7 || item.Type == 8) ? parseInt(val.Content) : val.Content})
							}
						})
					})
				}
			},
			async _getProvinceList() {
				let res = await getProvinceList({appKey: 'C23DQW'})
				this.provinceList = res.data.data
			},
			async provinceChange(ID) {
				let city = await getCityByProvinceIDList({appKey: 'C23DQW', provinceID: ID})
				this.cityList = city.data.data
			}
		}
	}
</script>

<style lang="less" scoped>
	.mustIcon{
		/deep/.ant-form-item-label{
			label{
				&::before{
					display: inline-block;
					margin-right: 4px;
					color: #f5222d;
					font-size: 14px;
					font-family: SimSun, sans-serif;
					line-height: 1;
					content: '*';
				}
			}
		}
	}
	.bg-cover{
		background: rgba(0,0,0,0);
		position: absolute;
		left: 0;
		top: 50px;
		width: 100%;
		height: 90%;
		z-index: 999999;
	}
	.icon-f{
		position: relative;
	}
	.icon-cc{
		position: absolute;
		left: -94px;
		top: -33px;
		font-weight: bold;
		color: #f5222d;
	}
	.row {
		display: flex;
		justify-content: space-around;
		margin-top: 15px;
	}

	.aid {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		top: 0px;
		left: 0px;
		z-index: 999;
	}
	.scrollView{
		width: 100%;
		height: 550px;
		overflow-y: auto;
	}
	.base {
		position: fixed;
		width: 600px;
		height: 640px;
		background: #fff;
		left: 50%;
		top: 50%;
		margin-left: -300px;
		margin-top: -320px;
		overflow-y: hidden;
		border-radius: 8px;
		/deep/.ant-form-item {
			margin: 20px 30px 10px 20px;
			/deep/.ant-form-item-label {
				margin-right: 10px;
				width: 110px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-align: right !important;
			}

			/deep/.ant-form-item-control-wrapper {
				flex: 1;
			}
		}
	}

	.base p {
		padding: 20px 0 0 20px;
		font-size: 16px;
		.closeCircle{
			font-size: 22px;
			float: right;
			margin-right: 18px;
		}
	}

	.subnav {
		margin-left: 60px;
		height: 46px;
		display: flex;
	}

	.subnav p {
		width: 100px;
		text-align: right;
	}

	.subnav input {
		width: 300px;
		height: 30px;
		border: 1px solid #DAD9DC;
		margin-left: 20px;
	}

	.ant-form-item {
		margin-bottom: 10px;
	}
</style>
